<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length3">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">HTML</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
                                    <!--HTML-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    <div class="module press">
        <ul class="list_h_36rem">
          <li class="pos_rel bg_white">
            <dl class="h_in">
              <dt class="fl ml_3">切换城市</dt>
              <dd class="fr w_60 mr_3 h_in">
                <div class="pos_rel mt_06rem h_24rem border bor_gray_ddd w_100 bg_gray_f9f">
                  <input type="text" class="plug_change_text1 fl w_35 h_in text_al_c c_gray_777 bor_rad_0" value="北京市">
                  <button type="button" class="plug_change_btn fl w_30 h_in bor_left bor_right bor_gray_ddd bg_white icon-ly_qiehuan"></button>
                  <input type="text" class="plug_change_text2 fl w_35 h_in text_al_c c_gray_777 bor_rad_0" value="上海市">
                </div>
              </dd>
            </dl>
          </li>
        </ul>
    </div>
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--插件调用-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    $(function(){
        $(".plug_change_btn").AKjs_ChangeInput({
            text_input: new Array( //两个左侧和右侧的输入框设置
                ".plug_change_text1", //切换按钮的“左侧”输入框Class
                ".plug_change_text2" //切换按钮的“右侧”输入框Class
            ),
            onChange:function(l_val,r_val){ //回调获取当前实时变化的左右两个值
                console.log("左侧："+l_val);
                console.log("右侧："+r_val);
            }
        });
    });
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--按需引入-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    AKjs_Plugin("AKjs_ChangeInput"); //输入框值互换功能
</textarea>
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pos_rel ovh pa_2"></div>
                </article>
            </section>
        </div>
    </ak-main>

    <ak-plugin></ak-plugin>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
